<template>
  <div class="edit-link" v-if="!getIsPhone">
    <div class="title">
      <span class="icon left">
        <i class="iconfont icontg_tuiguanglianjie"></i>
      </span>
      <span class="name">
        编辑
      </span>
      <span class="icon right hover-style" @click="handleClose">
        <i class="iconfont iconty_guanbi"></i>
      </span>
    </div>
    <div class="content-wrapper">
      <div class="content">
        <div class="set-account">
          <input-item-template :title="'账号类型'">
            <radio-selector 
              :options="options"
              :activeSwitchIndex="activeSwitchIndex"
              @click="updateActiveSwitchIndex"
            ></radio-selector>
          </input-item-template>
          <input-item-template :title="'备注'">
            <input 
              type="text" 
              placeholder="自定义名称不超过10个字" 
              class="remarks"
              :value="linkTitle"
              @input="updateInputValue($event)"
            >
          </input-item-template>
        </div>
        <div class="set-refund">
          <input-item-template
            :title="'彩票返点'"
            >
            <template v-slot:refund>
              <div>
                <span>{{lotteryRefundRate | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <range-slider :percent="lotteryRefundRate" @click="changeLotteryRefund"></range-slider>
            <!-- <progress-bar :percent="lotteryRefundRate" @click="changeLotteryRefund"></progress-bar> -->
          </input-item-template>
          <input-item-template
            :title="'AG返点'"
            >
            <template v-slot:refund>
              <div>
                <span>{{(agRefundRate) | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <range-slider :percent="agRefundRate" @click="changeAGRefund"></range-slider>
            <!-- <progress-bar :percent="agRefundRate" @click="changeAGRefund"></progress-bar> -->
          </input-item-template>
          <input-item-template
            :title="'皇冠返点'"
            >
            <template v-slot:refund>
              <div>
                <span>{{(chrownRefundRate) | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <range-slider :percent="chrownRefundRate" @click="changeChrownRefund"></range-slider>
            <!-- <progress-bar :percent="chrownRefundRate" @click="changeChrownRefund"></progress-bar> -->
          </input-item-template>
          <input-item-template
            :title="'分红'"
            >
            <template v-slot:refund>
              <div>
                <span>{{(bonusRefundRate) | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <range-slider :percent="bonusRefundRate" @click="changeBonusRefund"></range-slider>
            <!-- <progress-bar :percent="bonusRefundRate" @click="changeBonusRefund"></progress-bar> -->
          </input-item-template>
          <input-item-template
            :title="'日工资'"
            >
            <template v-slot:refund>
              <div>
                <span>{{(salaryRefundRate) | formatPercent}}</span>
                <span>~</span>
                <span>1792</span>
              </div>
            </template>
            <range-slider :percent="salaryRefundRate" @click="changeSalaryRefund"></range-slider>
            <!-- <progress-bar :percent="salaryRefundRate" @click="changeSalaryRefund"></progress-bar> -->
          </input-item-template>
        </div>
      </div>
    </div>
    <div class="buttons">
      <button class="btn button-unselected hover-style" @click="handleClose">取消</button>
      <button class="btn button-selected hover-style" @click="createOrSaveLink">保存</button>
    </div>
  </div>
  <div class="edit-link" v-else>
    <header-template-phone>
      <template v-slot:left>
        <div class="back" style="display: flex; alignItems: center;">
          <span class="icon" @click="handleClose">
            <i class="iconfont iconstbar_fanhui" style="fontSize:22px"></i>
          </span>
          <span style="marginLeft: -4px;">返回</span>
        </div>
      </template>
      <template v-slot:center>
        <div class="center-context">
          编辑
        </div>
      </template>
      <template v-slot:right>
        <div @click="createOrSaveLink">
          保存
        </div>
      </template>
    </header-template-phone>
    <div class="content">
      <div class="set-account box-shadow">
        <input-item-template :title="'账号类型'">
          <radio-selector 
            :options="options"
            :activeSwitchIndex="activeSwitchIndex"
            @click="updateActiveSwitchIndex"
          ></radio-selector>
        </input-item-template>
        <input-item-template :title="'备注'">
          <input 
            type="text" 
            placeholder="自定义名称不超过10个字" 
            class="remarks"
            :value="linkTitle"
            @input="updateInputValue($event)"
          >
        </input-item-template>
        <!-- <input-item
          :type="'text'" 
          :title="'备注'" 
          :placeholder="'最多限制10个字以内'"
          @input="updateInputValue"
        ></input-item> -->
      </div>
      <div class="set-refund box-shadow">
        <input-item-template
          :title="'彩票返点'"
          >
          <template v-slot:refund>
            <div>
              <span>{{lotteryRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <range-slider :percent="lotteryRefundRate" @click="changeLotteryRefund"></range-slider>
          <!-- <progress-bar :percent="lotteryRefundRate" @click="changeLotteryRefund"></progress-bar> -->
        </input-item-template>
        <input-item-template
          :title="'AG返点'"
          >
          <template v-slot:refund>
            <div>
              <span>{{agRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <range-slider :percent="agRefundRate" @click="changeAGRefund"></range-slider>
          <!-- <progress-bar :percent="agRefundRate" @click="changeAGRefund"></progress-bar> -->
        </input-item-template>
        <input-item-template
          :title="'皇冠返点'"
          >
          <template v-slot:refund>
            <div>
              <span>{{chrownRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <range-slider :percent="chrownRefundRate" @click="changeChrownRefund"></range-slider>
          <!-- <progress-bar :percent="chrownRefundRate" @click="changeChrownRefund"></progress-bar> -->
        </input-item-template>
        <input-item-template
          :title="'分红'"
          >
          <template v-slot:refund>
            <div>
              <span>{{bonusRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <range-slider :percent="bonusRefundRate" @click="changeBonusRefund"></range-slider>
          <!-- <progress-bar :percent="bonusRefundRate" @click="changeBonusRefund"></progress-bar> -->
        </input-item-template>
        <input-item-template
          :title="'日工资'"
          >
          <template v-slot:refund>
            <div>
              <span>{{salaryRefundRate | formatPercent}}</span>
              <span>~</span>
              <span>1792</span>
            </div>
          </template>
          <range-slider :percent="salaryRefundRate" @click="changeSalaryRefund"></range-slider>
          <!-- <progress-bar :percent="salaryRefundRate" @click="changeSalaryRefund"></progress-bar> -->
        </input-item-template>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import RadioSelector from '@/components/base/radio-selector/radio-selector'
import InputItemTemplate from '@/components/input-item-template/input-item-template'
import ProgressBar from '@/components/progress-bar/progress-bar'
import InputItem from '@/pages/login/components/input-item'
import HeaderBack from '@/components/base/header-back/header-back'
import RangeSlider from '@/components/base/range-slider/range-slider'

import { mapGetters } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    RadioSelector,
    InputItem,
    InputItemTemplate,
    ProgressBar,
    HeaderBack,
    RangeSlider
  },
  props: {
    linkData: {
      type: Object,
      default: function() {
        return {
          accountType: '代理',
          salaryRefundRate: 0,
          lotteryRefundRate: 0,
          agRefundRate: 0,
          bonusRefundRate: 0,
          chrownRefundRate: 0
        }
      }
    }
  },
  data() {
    return {
      options: [
        {
          id: 1,
          name: '代理'
        },
        {
          id: 2,
          name: '会员'
        }
      ],
      linkTitle: this.linkData.linkTitle,
      activeSwitchIndex: this.linkData.accountType == '代理' ? 0 : 1,
      accountType: this.linkData.accountType,
      salaryRefundRate: this.linkData.salaryRefundRate,
      lotteryRefundRate: this.linkData.lotteryRefundRate,
      agRefundRate: this.linkData.agRefundRate,
      bonusRefundRate: this.linkData.bonusRefundRate,
      chrownRefundRate: this.linkData.chrownRefundRate,
   }
  },
  methods:{
    updateActiveSwitchIndex(index) {
      this.activeSwitchIndex = index
      this.accountType = this.activeSwitchIndex == 0 ? '代理' : '会员'
    },
    changeLotteryRefund(persent) {
      this.lotteryRefundRate = persent / 100
    },
    changeAGRefund(persent) {
      this.agRefundRate = persent / 100
    },
    changeChrownRefund(persent) {
      this.chrownRefundRate = persent / 100
    },
    changeBonusRefund(persent) {
      this.bonusRefundRate = persent / 100
    },
    changeSalaryRefund(persent) {
      this.salaryRefundRate = persent / 100
    },
    // createLink() {
    //   let data = {
    //     id: this.linkData.id,
    //     accountType: this.accountType,
    //     linkTitle: this.linkTitle,
    //     lotteryRefundRate: this.lotteryRefundRate,
    //     agRefundRate: this.agRefundRate,
    //     chrownRefundRate: this.chrownRefundRate,
    //     bonusRefundRate: this.bonusRefundRate,
    //     salaryRefundRate: this.salaryRefundRate,
    //   }
    //   this.$emit('click', data)
    // },
    handleClose() {
      this.$emit('hide')
    },
    updateInputValue(e) {
      this.linkTitle = e.target.value 
    },
    createOrSaveLink() {
      let data = {
        id: this.linkData.id,
        accountType: this.accountType,
        linkTitle: this.linkTitle,
        lotteryRefundRate: this.lotteryRefundRate,
        agRefundRate: this.agRefundRate,
        chrownRefundRate: this.chrownRefundRate,
        bonusRefundRate: this.bonusRefundRate,
        salaryRefundRate: this.salaryRefundRate,
      }
      console.log('data')
      this.$emit('click', data)
    }
  },
  computed: {
    ...mapGetters('lottery', ['getUserInfo', 'getIsPhone']),
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  @media screen and (min-width 750px)
    ::-webkit-scrollbar
      width: 4px;
      height: 16px;
      background-color: #F5F5F5;
    ::-webkit-scrollbar-track
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
    ::-webkit-scrollbar-thumb
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    .edit-link 
      position absolute  
      width 480px
      height 350px 
      background $color-text-button
      top 50%
      left 50% 
      transform translate(-50%, -50%)
      border-radius 3px
      .title 
        height 48px 
        width 100% 
        background $color-theme-dark 
        display flex 
        align-items center 
        justify-content space-between
        box-sizing border-box 
        padding 0 15px 
        color #fff 
        position absolute 
        left 0
        right 0
        top 0
        z-index 1000
        .icon 
          color #fff 
          &.left 
            .iconfont 
              font-size 34px
          &.right 
            .iconfont 
              color $color-theme-red 
          .iconfont 
            font-size 24px
      .content-wrapper 
        box-sizing border-box 
        padding 0 20px
        padding-top 48px 
        padding-bottom 80px
        height 100%
        overflow-y scroll  
        .remarks 
          width 100%
          background none 
        placeholder-color()
      .buttons 
        position absolute 
        bottom 0
        left 0
        right 0
        height 80px 
        font-size 0
        text-align center
        background $color-text-button 
        z-index 1000
        .btn 
          width 90px 
          height 36px
          font-size 14px
          margin-top 24px 
          margin-right 10px
  @media screen and (max-width 750px)
    .edit-link 
      position absolute 
      left 0
      right 0
      bottom 0
      top 0
      background:linear-gradient(180deg, #e5e5e5, #fefbfb)
      .content    
        box-sizing border-box 
        padding 0 10px
        padding-top 58px 
        overflow hidden 
        .set-account
          border-radius 3px
          background $color-text-button 
          .input-item 
            height 70px 
            padding 10px 
            box-sizing border-box
            display flex 
            flex-direction column
            justify-content space-around
          .remarks 
            width 100%
            background none 
          placeholder-color()
        .set-refund 
          margin-top 10px 
          border-radius 3px
          background $color-text-button 
            
</style>